<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/select/1.2.3/css/select.dataTables.min.css" rel="stylesheet">
    <link href="/new/public/static/admin/css/editor.dataTables.min.css" rel="stylesheet">
    <link href="/new/public/static/admin/css/editor.bootstrap4.min.css" rel="stylesheet">
    <link href="/new/public/static/common/css/common.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
    <tr>
        <th></th>
        <th>First name</th>
        <th>Last name</th>
        <th>Position</th>
        <th>Office</th>
        <th width="18%">Start date</th>
    </tr>
    </thead>
</table>
</body>
</html>

<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.3/js/dataTables.select.min.js"></script>
<script src="/new/public/static/admin/js/dataTables.editor.min.js"></script>
<script src="/new/public/static/admin/js/editor.bootstrap4.min.js"></script>
<script>

    var lang = {
        "sProcessing": "处理中...",
        "sLengthMenu": "每页 _MENU_ 条记录",
        "sZeroRecords": "没有匹配结果",
        "sInfo": "当前显示第 _START_ 至第 _END_ 条记录，共 _TOTAL_ 条记录。",
        "sInfoEmpty": "当前显示第 0 至 0 条记录，共 0 条记录",
        "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
        "sInfoPostFix": "",
        "sSearch": "搜索:",
        "sUrl": "",
        "sEmptyTable": "表中数据为空",
        "sLoadingRecords": "载入中...",
        "sInfoThousands": ",",
        "oPaginate": {
            "sFirst": "首页",
            "sPrevious": "上页",
            "sNext": "下页",
            "sLast": "末页",
            "sJump": "跳转"
        },
        "oAria": {
            "sSortAscending": ": 以升序排列此列",
            "sSortDescending": ": 以降序排列此列"
        },
        'buttons':{
            'selected':'选中',
            'selectedSingle':'单选',
            'selectAll':'全选',
            'selectNone':'不选',
            'selectRows':'单行',
            'selectColumns':'单列',
            'selectCells':'单格',
            'create':'新增',
            'edit':'编辑',
            'remove':'删除',
            'update':'更新',
            'save':'保存'
           // 'remove':'删除'
        }
    };

    var editor; // use a global for the submit and return data rendering in the examples
        editor = new $.fn.dataTable.Editor( {
            ajax:{
                url : "{:url('index/pt')}",
                type : "POST",
                success: function (data)
                {
                    if(parseInt(data.code)===1)
                    {
                        var html='<tr class="edit_success" style="background-color:rgba(0,205,0,0.8);"><td colspan="20">'+data.message+'</td></tr>';
                        $("#"+data.id).before(html);
                    }
                    else
                    {
                        html='<tr class="edit_fail" style="background-color:rgba(255,0,0,0.8);"><td colspan="20">'+data.message+'</td></tr>';
                        $("#"+data.id).before(html);
                    }
                }
            },
            table: "#example",
            idSrc:  "id",
            fields: [ {
                label: "Id:",
                name: "id"
            }, {
                label: "Name:",
                name: "name"
            }, {
                label: "Pinyin:",
                name: "pinyin"
            }, {
                label: "Surname cover:",
                name: "surname_cover"
            }, {
                label: "Surname head:",
                name: "surname_head"
            }
            ]
        } );

        // Activate an inline edit on click of a table cell
        $('#example').on( 'click', 'tbody td:not(:first-child,:last-child)', function (e) {
            editor.inline( this , {
                onBlur: 'submit'
            } );
        } );

        var table=$('#example').DataTable( {
            language: {
                "url": "https://cdn.datatables.net/plug-ins/1.10.16/i18n/Chinese.json"
            },
            aLengthMenu: [5, 25, 50, "全部"],//让用户选择页面记录数量
            iDisplayLength: 5, //默认页面中的记录数量。
            dom: "Bfrtip",
            ajax : {
                dataSrc: function (json) {
                    console.log('process response data from server side before display.');
                    return json.data;
                },
                url : "{:url('index/getData')}",
                type : "POST",
                crossDomain: true
            },
            order: [[ 1, 'asc' ]],
            rowId: 'id',
            columns: [
                {
                    data: null,
                    defaultContent: '',
                    className: 'select-checkbox',
                    orderable: false
                },
                { data: "id" },
                { data: "name" },
                { data: "pinyin" },
                { data: "surname_cover" },
                { data: "surname_head" }
            ],
            select: {
                style: 'multi',
                selector: 'td:first-child'
            },
            buttons: [
                { extend: "create", editor: editor },
                { extend: "edit",   editor: editor },
                { extend: "remove", editor: editor }
            ],
            renderer: "bootstrap",
            serverSide : true//服务端进行分页处理
        } );




</script>
